<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList demo</title>   
    <style>
        html,body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-size: 14px;
            background: #105B63;
        }
        ul,li {
            list-style-type: none;
        }
        [v-cloak] {
            display: none;
        }
        #app {
            width: 800px;
            margin: 0 auto;
            background: #FFFAD5;
            padding: 10px;
        }
        .list-ipt {
            width: 100%;
            line-height: 40px;
            border-radius: 5px;
            border: 1px solid #e5e5e5;
            font-size: 14px;
        }
        .list .item {
            margin: 10px 0;
            padding: 10px;
            cursor: pointer;
        }
        .item:hover {
            border: 1px solid #0070FF;
        }
        .item .delete {
            float: right;
            color: #FF001B;
            cursor: pointer;
            display: none;
        }
        .item:hover .delete{
            display: block;
        }
        /* li div {
            display: block;
        } */
        li.editing div {
            display: none;
        }
        li .editing-text {
            width: 100%;
            height: 40px;
            /* padding-left: 10px; */
            display: none;
        }
        li.editing .editing-text {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h2>待办清单列表</h2>
        <div class="list">
            <h3>添加待办事项</h3>
            <input type="text" class="list-ipt" placeholder="输入事项后，按回车" @keyup.enter="addList" v-model="addText">
            <p class="list-num">共有{{prodList.length}}件待办事项，{{finish}}</p>
            <p>
                <input type="radio" name="list" class="choose-type" checked="true" @click="chooseList(1)"><label>所有事项</label>
                <input type="radio" name="list" class="choose-type" @click="chooseList(2)"><label for="">已完成事项</label>
                <input type="radio" name="list" class="choose-type" @click="chooseList(3)"><label for="">未完成事项</label>
            </p>
            <ul>
                <li class="item" v-for="(list,idx) in newList" :class="{'editing': curIndex === idx}" :key="list.item">
                    <div>
                        <!-- <span></span> -->
                        <input type="checkbox" @click="list.status = !list.status" :class="{'status-atcived':list.status}">
                        <span @click="curIndex = idx">{{list.name}}</span>
                        <span class="delete" @click="deleteList(idx)">X</span>
                    </div>
                    <input type="text" class="editing-text" v-model="list.name" @focus='editBefore(list.name)' @keyup.enter='edited' @blur='edited' @keyup.esc='cancelEdit(list)' v-focus >
                </li>
            </ul>
        </div>
    </div>
    <script src="https://unpkg.com/vue@2.5.10/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data:{
                addText: "",
                prodList:[
                    // { name: "html",status:false },
                    // { name: "css", status:false},
                    // { name: "javascript", status: false}
                ],
                newList: [],
                curIndex: "",
                beforeEditText: "",
            },
            created(){
                // localStorage 保存数据,下次打开(或刷新)能看到上次的事项清单
                window.onbeforeunload = () => {
                    let data = JSON.stringify(this.newList);
                    window.localStorage.setItem('keepData',data);
                }
                let storage = window.localStorage.getItem('keepData');
                let todos = JSON.parse(storage);
                this.prodList = todos || []
            },
            mounted(){
                //初始化，把prolist赋值给newList。默认显示所有事项
                this.newList = this.prodList;
            },
            computed:{
                //计算属性，返回未完成事项的条数，就是数组里面status=false的条数
                unfinish () {
                    return this.prodList.filter(function(item){
                        return !item.status
                    }).length;
                },
                finish (){
                    // 初始时，所有事项prodList条数为0时，文字提示为默认
                    if(this.prodList.length == 0){
                        return '';
                    } 
                    // 根据事项完成情况来判断文字提示的展现
                    if(this.unfinish == 0){
                        return '全部完成了'
                    }else{
                        return `完成了${this.prodList.length - this.unfinish}件，还有${this.unfinish}件未完成`
                    }
                        

                }
            },
            directives:{
                focus:{
                    update(el){
                        el.focus();
                    }
                }
            },
            methods:{
                //添加进来默认status=false,就是未完成状态
                addList(){
                    this.prodList.push({
                        name: this.addText,
                        status: false

                    })
                    this.addText = ""
                },
                chooseList(type) {
                    switch(type){
                        case 1:
                            this.newList = this.prodList;
                            break;
                        case 2:
                            this.newList = this.prodList.filter(item => item.status);
                            break;
                        case 3:
                            this.newList = this.prodList.filter(item => !item.status);
                            break;

                    }
                },
                editBefore(name){
                    this.beforeEditText = name;
                },
                edited(){
                    this.curIndex="";
                },
                cancelEdit(val){
                    val.name = this.beforeEditText;
                    this.curIndex = ""
                },
                deleteList(idx){
                    this.prodList.splice(idx,1);
                    //删除数据后，更新至newList
                    this.newList = this.prodList
                }
            }
        })
    </script>
</body>
</html>